<template>
    <div>
        <van-sticky>
            <van-nav-bar title="看电影" left-text="返回" left-arrow @click-left="onClickLeft" />
        </van-sticky>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in banner" :key="item.id">
                <img :src="'http://218.7.112.123:10001/'+item.advImg" alt="" />
            </van-swipe-item>
        </van-swipe>
        <van-tabs v-model="active">
            <van-tab title="热映" to="/movie/film">
                <FilmView></FilmView>
            </van-tab>
            <van-tab title="影院" to="/movie/cinema">
                <CinemaView></CinemaView>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import nav from "@/mixin/nav";
import { bannerList } from "@/service/movie/movieService";
import FilmView from "./components/FilmView.vue";
import CinemaView from "./components/CinemaView.vue";
export default {
    mixins: [nav],
    data() {
        return {
            banner: [],
            active: "0",
        };
    },
    methods: {
        onClickLeft() {
            this.$router.push("/");
        }
    },
    async created() {
        let { data } = await bannerList();
        console.log(data);
        this.banner = data.rows;
    },
    components: { FilmView, CinemaView }
}

</script>
<style scoped lang="scss">
.my-swipe .van-swipe-item {
    color: #fff;
    height: 150px;
    background-color: #39a9ed;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>